<template>
	<view class="content">
			<!-- 顶部收入统计区域 -->
			<view class="header">
				<view class="total-income">
					<text class="title">{{ $t('data.str11') }}</text>
					<text class="amount">{{total}}</text>
				</view>
				<view class="stats-row">
					<view class="stat-item">
						<text class="stat-value">{{cash}}</text>
						<text class="stat-title">{{ $t('data.str12') }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{wechat}}</text>
						<text class="stat-title">{{ $t('data.str13') }}</text>
					</view>
				</view>
			</view>
			<view class="vip-total-content">
				<view class="vip-total-row">
					<view class="vip-total-value">{{newMember}}</view>
					<view class="vip-total-title">{{$t('data.str33')}}</view>
					<view class="vip-total-value">{{notConsumed}}</view>
					<view class="vip-total-title">{{$t('data.str35')}}</view>
					<view class="vip-total-value">{{activity}}%</view>
					<view class="vip-total-title">{{$t('data.str37')}}</view>
				</view>
				<view class="vip-total-row">
					<view class="vip-total-value">{{repurchase}}</view>
					<view class="vip-total-title">{{$t('data.str34')}}</view>
					<view class="vip-total-value">{{repurchaseTotal}}</view>
					<view class="vip-total-title">{{$t('data.str36')}}</view>
				</view>
			</view>
			<view class="vip-balance-content">
				<view style="margin-top: 15rpx;margin-left: 15rpx;">{{$t('data.str38')}}</view>
				<view style="display: flex;flex-direction: row;">
					<view class="vip-total-row">
						<view class="vip-total-value">{{balance}}</view>
						<view class="vip-total-title">{{$t('comm.str1')}}</view>
						<view class="vip-total-value">{{ticket}}</view>
						<view class="vip-total-title">{{$t('comm.str4')}}</view>
						<view class="vip-total-value">{{eTicket}}</view>
						<view class="vip-total-title">{{$t('comm.str5')}}</view>
					</view>
					<view class="vip-total-row">
						<view class="vip-total-value">{{coins}}</view>
						<view class="vip-total-title">{{$t('comm.str2')}}</view>
						<view class="vip-total-value">{{pleasureCoins}}</view>
						<view class="vip-total-title">{{$t('comm.str3')}}</view>
						<view class="vip-total-value">{{integral}}</view>
						<view class="vip-total-title">{{$t('comm.str6')}}</view>
					</view>
				</view>
			</view>
			
	</view>
</template>

<script>
	export default {
		name: "data-revenue",
		data() {
			return {
				total:150.00,
				cash:0.00,
				wechat:0.00,
				ali:0.00,
				cashRegister:0.00,
				posMachine:0.00,
				coninMachine:0.00,
				wechatProgram:0.00,
				totalOrder:0,
				sellOrder:0,
				returnOrder:0,
				returnTotle:0.00,
				newMember:0,
				notConsumed:0,
				activity:100,
				repurchase:0,
				repurchaseTotal:0,
				balance:0,
				ticket:0,
				eTicket:0,
				coins:0,
				pleasureCoins:0,
				integral:0,
			};
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		padding: 15rpx;
	}

	/* 顶部区域样式 */
	.header {
		background-image: linear-gradient(120deg, #FF5402 0%, #FF5402 100%);
		width: 100%;
		height: fit-content;
		border-radius: 15rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.total-income {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 28rpx;
		color: #fff;
	}

	.amount {
		font-size: 48rpx;
		font-weight: bold;
		color: #fff;
		margin-top: 10rpx;
	}

	.stats-row {
		display: flex;
		justify-content: space-around;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.stat-item {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
	}

	.stat-title {
		font-size: 24rpx;
		color: #fff;
	}

	.stat-value {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 5rpx;
	}
	.vip-total-content{
		display: flex;
		width: 100%;
		margin-top: 15rpx;
		background-color: white;
		flex-direction: row;
	}
	.vip-balance-content{
		display: flex;
		width: 100%;
		margin-top: 15rpx;
		background-color: white;
		flex-direction: column;
	}
	.vip-total-row{
		display: flex;
		flex: 1;
		justify-content: start;
		align-items: center;
		flex-direction: column;
		padding-bottom: 25rpx;
	}
	.vip-total-value{
		margin-top: 25rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
	.vip-total-title{
		color: gray;
		font-size: 24rpx;
	}
</style>